---
title: "Ring Opacity"
description: "Utilities for setting the opacity of outline rings."
---

import plugin from 'tailwindcss/lib/plugins/ringOpacity'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = {
  plugin,
  transformProperties: ({ selector, properties }) => {
    return properties
  }
}


## Usage

Use the `ring-opacity-{amount}` utilities to set the opacity of an [outline ring](/docs/ring-width).

```html rose
<template preview class="flex justify-center p-8">
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-red-500 ring-4 ring-red-500 ring-opacity-50">
    Button
  </button>
</template>

<button class="... ring-4 **ring-red-500** **ring-opacity-50**">
  Button
</button>
```

---

## Responsive

To control the ring opacity at a specific breakpoint, add a `{screen}:` prefix to any existing ring opacity utility. For example, use `md:ring-opacity-50` to apply the `ring-opacity-50` utility at only medium screen sizes and above.

```html
<button class="ring-2 ring-blue-500 ring-opacity-75 **md:ring-opacity-50**">
  <!-- ... -->
</button>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

---

## Customizing

You can customize which ring opacity utilities are generated by customizing your global opacity scale under the `opacity` key in the `theme` section of your `tailwind.config.js` file:

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        opacity: {
+         '15': '0.15',
+         '35': '0.35',
+         '65': '0.65',
        }
      }
    }
  }
```

If you'd like to customize only the ring opacity utilities without affecting your global opacity scale, use the `ringOpacity` key instead:

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        ringOpacity: {
+         '15': '0.15',
+         '35': '0.35',
+         '65': '0.65',
        }
      }
    }
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme).

### Variants

<Variants plugin="ringOpacity" />

### Disabling

<Disabling plugin="ringOpacity" />
